<template>
    <div class="outsourcingManage-box">
        <!-- 外协商管理 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
        <div class="function-box" v-if="checkPermi(['system:outsource:edit'])">
            <el-button class="createBtn" @click="createInfo"><i class="iconfont icon-plus-square"></i>
                新增
            </el-button>
            <el-button class="reviseBtn" @click="updateInfo"><i class="iconfont icon-xiugai"></i>
                修改
            </el-button>
            <el-button class="exportBtn" @click="deleteData"> <i class="iconfont icon-shanchu"></i>
                删除
            </el-button>
        </div>
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals" :page="pageNum" :limit="pageSize"
            @handleSelectionChange="handleSelectionChange" @handleChange="handleChange" @updatePage="updatePage"
            @updateLimit="updateLimit" :tableHeaderData="inventoryTableHeaderData" :tableData="inventoryTableData"
            @tableDetail="tableDetail" />
        <newOutsourcing v-if="flag" :popTitle="popTitle" :disabled="disabled" :PopData="PopData" :defindFlag="defindFlag"
            @getoutboundOrderData="getoutboundOrderData" @closePopUps="closePopUps" />
    </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import newOutsourcing from './components/newOutsourcing';
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { queryOutsourcingApi, deleteOutsourceApi } from '@/api/outsourcing'
import { deletePopHook } from '@/hook/setPop/deletePop.js'
const { proxy } = getCurrentInstance();
let deletePop = deletePopHook()
let updatePop = updatePopHook()
import { ref, onMounted } from 'vue';
import { checkPermi } from "@/utils/permission.js";

const idActive = 'outsourcingId'
let popTitle = ref('新增外协商')
// 详情控制变量
let defindFlag = ref(true)
// 修改详情回显数据弹窗
let PopData = ref({})
let disabled = ref(false)
let flag = ref(false)
// 表单绑定属性名
let inventoryForm = ref(
    {
        outsourcingId: '',      // 外协商编号
        outsourcingName: '',    // 外协商名称
        outsourcingType: '',    // 外协商类别
        contactPerson: '',      // 联系人
        attn: ''              // 经办人
    }
)
// 表单数据标题
let inventoryFormLabel = ref([
    {
        name: 'outsourcingId',
        label: '外协商编号',
        minWidth: '120px'
    },
    {
        name: 'outsourcingName',
        label: '外协商名称',
        minWidth: '120px'
    },
    {
        name: 'outsourcingType',
        label: '外协商类别',
        type: 'select',
        minWidth: '120px',
        client: [
            {
                label: '工人',
                value: '1'
            },
            {
                label: '供应商',
                value: '2'
            },
        ]
    },
    {
        name: 'contactPerson',
        label: '联系人',
        minWidth: '120px'
    },
    {
        name: 'attn',
        label: '经办人',
        type: 'select',
        minWidth: '120px',
        client: [
            {
                label: '虾米',
                value: '1'
            }
        ]
    },
])
// 查找
const onSearch = (v) => {
    pageNum.value = 1
    getoutboundOrderData(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])


// 表格表头数据
let inventoryTableHeaderData = ref([
    {
        prop: 'outsourcingId',
        label: '外协商编号',
        colorClassName: 'activeColor'
    },
    {
        prop: 'outsourcingName',
        label: '外协商名称',
        colorClassName: 'activeColor'
    },
    {
        prop: 'outsourcingType',
        label: '外协商类别'
    },
    {
        prop: 'region',
        label: '所在地区'
    },
    {
        prop: 'attn',
        label: '经办人'
    },
    {
        prop: 'contactPerson',
        label: '联系人'
    },
    {
        prop: 'phoneNumber',
        label: '手机号',
        colorClassName: 'activeColor'
    }
])
// 表格数据内容
let inventoryTableData = ref([])

// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
    console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit
    getoutboundOrderData(inventoryForm.value)
}
// 当前页面位置发生变化
const updatePage = (v) => {
    console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
    console.log(v);
}

// 删除勾选的列二次提示
const deleteData = () => {
    let fn = async () => {
        let params = {
            outsourcingId: multipleSelection.value[0].outsourcingId
        }
        let { code, msg } = await deleteOutsourceApi(params)
        if (code == 200) {
            proxy.$modal.msgSuccess(msg);
            getoutboundOrderData()
        }
    }
    deletePop(multipleSelection, fn)
}
// 新增弹窗
const createInfo = () => {
    flag.value = true
    disabled.value = false

    popTitle.value = '新增外协商'
}
// 修改弹窗
const updateInfo = () => {
    defindFlag.value= false
    updatePop(multipleSelection, flag, popTitle, '修改外协商', disabled, PopData)
}
// 详情双击行
const tableDetail = (props) => {
    disabled.value = true
    flag.value = true
    popTitle.value = '外协商详情信息'
    defindFlag.value = false
    PopData.value = props
}
// 关闭弹窗
const closePopUps = () => {
    flag.value = false
    defindFlag.value = true
}
// 请求外协商接口函数
const getoutboundOrderData = async (data = '') => {
    let data1 = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(data1, data)

    let res = await queryOutsourcingApi(params)
    let { code, total, rows } = res
    if (code == 200) {
        inventoryTableData.value = rows
        totals.value = total
    }
}
onMounted(() => {
    getoutboundOrderData()
})
</script>
<style scoped lang='scss'>
.outsourcingManage-box {
    padding: 16px;

    .function-box {
        display: flex;
        align-items: center;
    }
}
</style>
